<template>
  <view class="container">
    <!-- 导航栏 -->
    <!--  <view class="nav-bar">
      <text @click="goBack" class="back-btn">返回</text>
      <text class="title">我的积分列表</text>
    </view> -->

    <!-- 积分记录表格 -->
    <scroll-view scroll-y class="record-list">
      <view v-for="(item, index) in formattedRecordList" :key="item.id || index" class="record-item">
        <text>{{ item.formattedCREATE_at }}</text>
        <text class="score">{{ item.OK_sum }}积分</text>
        <text>学习获得</text>
      </view>
    </scroll-view>

    <!-- 分页控制 -->
    <view class="pagination">
      <button type="default" size="mini" @click="loadMore" :disabled="!hasMoreData">加载更多</button>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      recordList: [], // 存储学习记录的数组
      currentPage: 1, // 当前页数
      hasMoreData: true // 是否还有更多数据
    };
  },
  computed: {
    // 格式化后的记录列表
    formattedRecordList() {
      return this.recordList.map(record => ({
        ...record,
        formattedCREATE_at: this.formatDate(record.CREATE_at) // 只保留日期
      }));
    }
  },
  methods: {
    // 获取学习记录
    async fetchStudyRecords(page = this.currentPage) {
      try {
        const token = await this.getTokenFromFile(); // 从文件中读取token
        
        console.log(token);

        const url = 'http://106.15.182.86:9099/studyrecord';
        const headers = {
          'Authorization': token,
          'Content-Type': 'application/json',
          'Host': '106.15.182.86:9099',
          'Connection': 'Keep-Alive',
          'Accept-Encoding': 'gzip'
        };
        const data = {
          query: {
            page,
            size: 10
          }
        };

        uni.request({
          url,
          method: 'POST', // 使用POST方法
          header: headers,
          data: JSON.stringify(data), // 发送的数据，需要序列化
          dataType: 'json', // 指定返回的数据类型
          success: (res) => {
            console.log('获取到的数据：', res.data);
            if (res.statusCode === 200 && res.data && res.data.data && res.data.data.length > 0) {
              // 检查是否有更多数据
              this.hasMoreData = res.data.data.length === 10;
              
              this.updateStudyRecordList(res.data.data);
            } else {
              // 如果没有更多数据
              this.hasMoreData = false;
              uni.showToast({
                title: '没有更多了',
                icon: 'none',
                duration: 2000
              });
            }
          },
          fail: (err) => {
            console.error('请求失败：', err);
          }
        });
      } catch (error) {
        console.error('获取token或请求过程中发生错误：', error);
      }
    },

    // 从本地文件读取token
    getTokenFromFile() {
      return new Promise((resolve, reject) => {
        uni.getStorage({
          key: 'token',
          success: function (res) {
            resolve(res.data);
          },
          fail: function (err) {
            reject(err);
          }
        });
      });
    },

    /* // 返回上一页
    goBack() {
      uni.navigateBack();
    }, */

    // 加载更多数据
    loadMore() {
      if (!this.hasMoreData) {
        uni.showToast({
          title: '没有更多了',
          icon: 'none',
          duration: 2000
        });
        return;
      }
      
      const nextPage = this.currentPage + 1; // 计算下一页
      this.currentPage = nextPage; // 更新当前页数
      this.fetchStudyRecords(nextPage); // 加载更多数据
    },

    // 更新学习记录列表
    updateStudyRecordList(newRecords) {
      if (!Array.isArray(newRecords)) {
        newRecords = [newRecords]; // 如果不是数组，则转换为单元素数组
      }
      
      this.recordList = [...this.recordList, ...newRecords];
      console.log('更新后的recordList:', this.recordList); // 输出更新后的recordList
      
      // 打印第一条记录
      if (this.recordList.length > 0) {
        console.log('第一条记录：', this.recordList[0]);
      }

      this.$nextTick(() => {
        console.log('视图已更新');
      });
    },

    // 格式化日期
    formatDate(timestamp) {
      const date = new Date(timestamp);
      const year = date.getFullYear();
      const month = String(date.getMonth() + 1).padStart(2, '0');
      const day = String(date.getDate()).padStart(2, '0');
      return `${year}-${month}-${day}`;
    }
  },
  onShow() {
    this.currentPage = 1; // 初始化当前页数
    this.fetchStudyRecords(); // 页面显示时获取学习记录
  }
}
</script>

<style scoped>
.container {
  display: flex;
  flex-direction: column;
}

.nav-bar {
  height: 44px;
  line-height: 44px;
  text-align: center;
  background-color: #007AFF;
  color: white;
  position: relative;
}

.back-btn {
  position: absolute;
  left: 15px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 14px;
}

.title {
  font-size: 18px;
}

.record-list {
  flex-grow: 1;
  padding: 5px;
  box-sizing: border-box;
}

.record-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px;
  margin-bottom: 6px;
  background-color: #f9f9f9;
  border-radius: 4px;
}

.score {
  color: red;
}

.pagination {
  padding: 16px;
  text-align: center;
}
</style>